import {
  MenuMode,
  MenuState,
  MenuInfo,
  MenuStatus,
  MenuConfig,
  MenuCommonConfig,
  MenuModelConfig,
  MenuClassicsConfig
} from '~/types/menu'
import { setStorage, getStorage } from '@/utils/storage'
import config from '@/config'
import routes from '@/router/routes'
const {
  menuMode: mode,
  menuTitle,
  menuLogo,
  menuAccordion,
  menuLeftSolid,
  menuCommonConfig,
  menuModelConfig,
  menuClassicsConfig,
  menuNoneIconLevel
} = config

const initMenuInfo: MenuInfo = {
  status: MenuStatus.DEFAULT,
  defaultCollapsed: false,
  smallCollapsed: false
}

const initMenuConfig: MenuConfig = {
  menuTitle,
  menuLogo,
  menuAccordion,
  menuLeftSolid,
  menuCommonConfig,
  menuModelConfig,
  menuClassicsConfig,
  menuNoneIconLevel
}

const configOptions = [
  {
    name: MenuMode.COMMON,
    configKey: 'menuCommonConfig'
  },
  {
    name: MenuMode.MODEL,
    configKey: 'menuModelConfig'
  },
  {
    name: MenuMode.CLASSICS,
    configKey: 'menuClassicsConfig'
  }
]

const findPathLink = (router, path) => {
  const result: Array<string> = []
  const findPath = (router) => {
    return router
      .map((route) => {
        if (route.path === path) {
          return route.path
        } else if (route.children && route.children.length) {
          const node = findPath(route.children)
          node.length && result.push(route.path)
          return node.length ? route.path : false
        }
      })
      .filter(Boolean)
  }

  findPath(router)
  return result
}

export const useMenuStore = defineStore({
  id: 'menu',
  state: (): MenuState => ({
    menuMode: (getStorage('MENU_MODE') as MenuMode) || MenuMode[mode],
    menuConfig: (getStorage('MENU_CONFIG') as MenuConfig) || initMenuConfig,
    // menuConfig:  initMenuConfig,
    menuCollapsedHover: undefined,
    menuCollapsedHoverLink: [],
    menuInfo: { ...initMenuInfo }
  }),
  getters: {
    getMenuStatus: (state) => state.menuInfo.status,
    getMenuMode: (state) => state.menuMode,
    getMenuCollapsedHover: (state) => state.menuCollapsedHover,
    getMenuCollapsedHoverLink: (state) => {
      return state.menuCollapsedHoverLink
    },
    getMenuCollapsed: ({ menuInfo }) =>
      menuInfo.status === MenuStatus.DEFAULT
        ? menuInfo.defaultCollapsed
        : menuInfo.smallCollapsed,
    getMenuConfig: ({
      menuConfig,
      menuMode
    }): MenuConfig &
      (MenuCommonConfig | MenuModelConfig | MenuClassicsConfig) => {
      const configKey = configOptions.find(
        (option) => option.name === menuMode
      )?.configKey
      const config = configKey ? menuConfig[configKey] : {}
      return { ...menuConfig, ...config }
    }
  },
  actions: {
    initMenuInfo() {
      this.menuInfo = { ...initMenuInfo }
    },
    /**
     * @description 改变菜单栏模式
     */
    setMenuMode(type: MenuMode) {
      if (type === this.menuMode) return
      this.menuMode = type
      this.initMenuInfo()
    },
    setMenuModeStorage(type?: MenuMode) {
      setStorage('MENU_MODE', type || this.menuMode)
    },
    resetMenuMode() {
      this.menuMode = MenuMode[mode]
      this.setMenuModeStorage()
    },
    setMenuCollapsedHover(path: string | undefined) {
      this.menuCollapsedHover = path
      this.menuCollapsedHoverLink = path
        ? findPathLink(routes, this.menuCollapsedHover)
        : []
    },
    /**
     * @description 改变菜单栏config
     */
    changeMenuConfig(config) {
      Object.assign(this.menuConfig, { ...config })
    },
    changeMenuConfigStorage() {
      setStorage('MENU_CONFIG', this.menuConfig)
    },
    /**
     * @description 重置菜单栏config
     */
    resetMenuConfig() {
      Object.assign(this.menuConfig, { ...initMenuConfig })
      setStorage('MENU_CONFIG', this.menuConfig)
    },
    /**
     * @description 切换菜单栏伸缩状态
     */
    toggleMenuCollapsed(): boolean {
      return this.menuInfo.status === 'default'
        ? (this.menuInfo.defaultCollapsed = !this.menuInfo.defaultCollapsed)
        : (this.menuInfo.smallCollapsed = !this.menuInfo.smallCollapsed)
    },
    /**
     * @description 更改菜单栏伸缩状态
     */
    changeMenuCollapsed(val: boolean): boolean {
      return this.menuInfo.status === 'default'
        ? (this.menuInfo.defaultCollapsed = val)
        : (this.menuInfo.smallCollapsed = val)
    },
    /**
     * @description 更改菜单栏伸缩模式
     */
    changeMenuMode(val: MenuStatus): boolean {
      this.menuInfo.status = val
      return true
    },
    changeMenuSmallCollapsed(val: boolean): boolean {
      return (this.menuInfo.smallCollapsed = val)
    },
    /**
     * @description 判断屏幕宽度是否小于992
     */
    isSmallScreen(): boolean {
      return (
        (document.documentElement.clientWidth || document.body.clientWidth) <=
        992
      )
    }
  }
})
